<template>
  <div id="china_map_box">
      <div id="china_map"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import 'echarts/map/js/china.js'

import dianxinImage from "@/assets/images/u2169.png";
import yidongImage from "@/assets/images/u2189.png";
import liantongImage from "@/assets/images/u2205.png";

const seriesList = [
  {
    name: "电信",
    image: dianxinImage,
    color: "#61a0a8",
    data: [
      {
        name: "dianxin",
        value: [104.06, 30.67, 2]
      }
    ]
  },
  {
    name: "联通",
    image: liantongImage,
    color: "#2f4554",
    data: [
      {
        name: "liantong",
        value: [101.72, 31.93, 2]
      },
      {
        name: "liantong",
        value: [105.04, 29.59, 2]
      }
    ]
  },
  {
    name: "移动",
    image: yidongImage,
    color: "#c23531",
    data: [
      {
        name: "yidong",
        value: [104.73, 31.48, 2]
      },
      {
        name: "yidong",
        value: [105.97, 31.75, 2]
      }
    ]
  }
];

const series = seriesList.map((v) => {
  return {
    name: v.name,
    type: "custom", //配置显示方式为用户自定义
    coordinateSystem: "geo",
    itemStyle: {
      normal: {
        color: v.color
      }
    },
    renderItem(params, api) {
      //具体实现自定义图标的方法
      return {
        type: "image",
        style: {
          image: v.image,
          x: api.coord([
            v.data[params.dataIndex].value[0],
            v.data[params.dataIndex].value[1]
          ])[0],
          y: api.coord([
            v.data[params.dataIndex].value[0],
            v.data[params.dataIndex].value[1]
          ])[1]
        }
      };
    },
    data: v.data
  };
});

const option = {
  tooltip: {
    show: true,
    trigger: "item",
    triggerOn: "click",
    formatter: "名称:{b}<br />坐标:{c}"
  },
  legend: {
    type: "plain",
    show: true,
    orient: "vertical",
    top: "middle",
    right: 0,
    data: [
      {
        name: "电信",
        textStyle: {
          color: "#61a0a8"
        }
      },
      {
        name: "联通",
        textStyle: {
          color: "#2f4554"
        }
      },
      {
        name: "移动",
        textStyle: {
          color: "#c23531"
        }
      }
    ]
  },
  series,
  geo: {
    //引入四川省的地图
    map: "sichuan",
    label: {
      emphasis: {
        show: true
      }
    },
    // roam: true,
    zoom: 1,
    itemStyle: {
      normal: {
        borderColor: "#387ba7",
        shadowColor: "rgba(0, 0, 0, 0.5)",
        shadowBlur: 10,
        shadowOffsetX: 10
      },
      emphasis: {
        areaColor: "#b3f3f3"
      }
    }
    // regions: [
    //   //对不同的区块进行着色
    //   {
    //     name: '成都市',
    //     itemStyle: {
    //       normal: {
    //         areaColor: '#2b97df',
    //       },
    //     },
    //   },
    // ],
  }
};


export default {
  data() {
    return {
      //echart 配制option  
      options: {
        tooltip: {
          triggerOn: "click",   //mousemove、click
          padding:8,
          borderWidth:1,
          borderColor:'#409eff',
          backgroundColor:'rgba(255,255,255,0.7)',
          textStyle:{
            color:'#000000',
            fontSize:13
          },
          formatter: function(e) {
            let data = e.data;
            //模拟数据
            data.specialImportant = Math.random()*1000 | 0;
            data.import = Math.random()*1000 | 0;
            data.compare = Math.random()*1000 | 0;
            data.common = Math.random()*1000 | 0;
            data.specail = Math.random()*1000 | 0;

            let context = `
               <div>
                   <p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</p>
                   <p class="tooltip_style"><span class="tooltip_left">事件总数</span><span class="tooltip_right">${data.value}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">特别重大事件</span><span class="tooltip_right">${data.specialImportant}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">重大事件</span><span class="tooltip_right">${data.import}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">较大事件</span><span class="tooltip_right">${data.compare}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">一般事件</span><span class="tooltip_right">${data.common}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">特写事件</span><span class="tooltip_right">${data.specail}</span></p>
               </div>
            `
            context = data.name + '<button class="more" style="color: red;" type="button" onclick="' +
                        // this.goToDetail(data.name) +
                        '">查 看></button>' + '<br>' +
                        '总数' + '&nbsp' + data.value
            return context;
          }
        },
        visualMap: {
          show:true,
          left: 26,
          bottom: 40,
          showLabel:true,
          pieces: [
            {
              gte: 100,
              label: ">= 1000",
              color: "#1f307b"
            },
            {
              gte: 500,
              lt: 999,
              label: "500 - 999",
              color: "#3c57ce"
            },
            {
              gte: 100,
              lt:499,
              label: "100 - 499",
              color: "#6f83db"
            },
            {
              gte: 10,
              lt: 99,
              label: "10 - 99",
              color: "#9face7"
            },
            {
              lt:10,
              label:'<10',
              color: "#bcc5ee"
            }
          ]
        },
        geo: {
          map: "china",
          scaleLimit: {
            min: 1,
            max: 2
          },
          zoom: 1,
          top: 120,
          label: {
            normal: {
              show:true,
              fontSize: "14",
              color: "rgba(0,0,0,0.7)"
            }
          },
          itemStyle: {
            normal: {
              //shadowBlur: 50,
              //shadowColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              areaColor: "#f2d5ad",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0
            }
          }
        },
        series: [
          {
            name: "突发事件",
            type: "map",
            geoIndex: 0,
            data:[]
          }
        ]
      },
      //echart data
      dataList: [
        {
          name: "南海诸岛",
          value: 100,
          eventTotal:100,
          specialImportant:10,
          import:10,
          compare:10,
          common:40,
          specail:20
        },
        {
          name: "北京",
          value: 540
        },
        {
          name: "天津",
          value: 130
        },
        {
          name: "上海",
          value: 400
        },
        {
          name: "重庆",
          value: 750
        },
        {
          name: "河北",
          value: 130
        },
        {
          name: "河南",
          value: 830
        },
        {
          name: "云南",
          value: 110
        },
        {
          name: "辽宁",
          value: 19
        },
        {
          name: "黑龙江",
          value: 150
        },
        {
          name: "湖南",
          value: 690
        },
        {
          name: "安徽",
          value: 60
        },
        {
          name: "山东",
          value: 39
        },
        {
          name: "新疆",
          value: 4
        },
        {
          name: "江苏",
          value: 31
        },
        {
          name: "浙江",
          value: 104
        },
        {
          name: "江西",
          value: 36
        },
        {
          name: "湖北",
          value: 52
        },
        {
          name: "广西",
          value: 33
        },
        {
          name: "甘肃",
          value: 7
        },
        {
          name: "山西",
          value: 5
        },
        {
          name: "内蒙古",
          value: 778
        },
        {
          name: "陕西",
          value: 22
        },
        {
          name: "吉林",
          value: 4
        },
        {
          name: "福建",
          value: 18
        },
        {
          name: "贵州",
          value: 5
        },
        {
          name: "广东",
          value: 98
        },
        {
          name: "青海",
          value: 1
        },
        {
          name: "西藏",
          value: 0
        },
        {
          name: "四川",
          value: 44
        },
        {
          name: "宁夏",
          value: 4
        },
        {
          name: "海南",
          value: 22
        },
        {
          name: "台湾",
          value: 3
        },
        {
          name: "香港",
          value: 5
        },
        {
          name: "澳门",
          value: 555
        }
      ]
    };
  },
  methods: {
    //初始化中国地图
    initEchartMap() {
      let mapDiv = document.getElementById('china_map');
      let myChart = echarts.init(mapDiv);
      myChart.setOption(this.options);
    },
    //修改echart配制
    setEchartOption(){
       this.options.series[0]['data'] = this.dataList;
    },
    // 跳转省份下钻
    goToDetail(provinceCode) {
        // this.provinceCode = provinceCode;
        document.getElementById('china_map').addEventListener('click', (ev) => {
            let el = ev.target;
            if (el.tagName.toLowerCase() === 'button' && el.className === 'more') {
                console.log(provinceCode)
                // Emp.execute(`gotoProvince('')`)
            }
        })

    },
  },
  created() {
    this.setEchartOption();
  },
  mounted() {
      this.$nextTick(()=>{
          this.initEchartMap();
      })
    
  }
};
</script>

<style scoped>
    #china_map_box {
        height: 100%;
        position: relative;
    }
    #china_map_box #china_map{
        height: 100%;
    }
     #china_map_box .china_map_logo{
        position: absolute;
        top: 0;
        left: 0;
        width:45px;
     }
</style>
<style>
  #china_map .tooltip_style{
      line-height:1.7;
      overflow: hidden;
  }
  #china_map .tooltip_left{
      float: left;
  }
  #china_map .tooltip_right{
      float: right;
  }

</style>
